<style>
    .ui-menu {
        border: solid #eee 1px;
        background-color: white;
    }

    .ui-menu .ui-menu-item {
        padding: 0px;
        margin-bottom: 2px;
    }
</style> 

<header>
    <div class="row b-b m-l-none m-r-none bg-white-only">
        <div class="col-sm-4">
            <h3 class="m-t m-b-none">SMS Messaging</h3>
            <p class="block text-muted">Welcome to your membership home!</p>
        </div>
        <div class="col-sm-8">
            <!-- MINI STATS - Review before deleting permanently -->
            <div class="clearfix m-t-lg m-b-sm pull-right pull-none-xs">
                <div class="pull-left">                  
                    <div class="pull-right m-l-xs">
                        <span class="block">SMS Balance <!--<span class="badge up bg-danger">+5</span>--></span>                    
                        <span class="h4 block text-center" id="sms_account_balance"><?php echo $sms_account['balance']; ?></span>
                        <!--<i class="fa fa-level-up text-success"></i>-->
                    </div>
                    <div class="clear">
                        <i class="fa fa-mobile-phone fa-3x"></i>
                    </div>
                </div>
                <div class="pull-left m-l-lg">
                    <div class="pull-left m-r-xs">
                        <button type="button" class="btn btn-success btn-sm"><i class="fa fa-mobile-phone"></i> Buy Credit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- <div class="wrapper bg-light font-bold">
        QUICK ACCESS BAR - REVIEW
       <a href="#" class="m-r"><i class="fa fa-bar-chart-o fa-2x icon-muted v-middle"></i> Analysis</a>
       <a href="#" class="m-r"><span class="badge up m-r-n bg-danger">4</span><i class="fa fa-envelope fa-2x icon-muted  v-middle"></i> Message</a>
       <a href="#" class="m-r"><i class="fa fa-calendar fa-2x icon-muted  v-middle"></i> My Calendar</a>
       <a href="#"><i class="fa fa-cog fa-2x icon-muted  v-middle"></i> Settings</a>
       
    </div>-->

</header> 
<section  class="hbox stretch">



    <div class="wrapper">

        <div class="col-lg-6">
            <!-- left tab -->
            <section class="panel">
                <header class="panel-heading bg-light">
                    <ul class="nav nav-tabs pull-right">
                        <li class="active"><a href="#messages-1" data-toggle="tab"><i class="fa fa-comments text-default"></i></a></li>
                        <li><a href="#instant-history" data-toggle="tab"><i class="fa fa-user text-default"></i> History</a></li>
                        <li><a href="#settings-1" data-toggle="tab"><i class="fa fa-cog text-default"></i> Settings</a></li>
                    </ul>
                    <span class="hidden-sm font-bold">Send Direct Instant Message</span>
                </header>
                <div class="panel-body">
                    <div class="tab-content">              
                        <div class="tab-pane active" id="messages-1">
                            <form action="<?php echo $this->Html->url(array('action' => 'sendInstantMessage')); ?>" id="send_instant_form" method="post" class="form form-horizontal">
                                <div class="form-group">
                                    <div class="control-label col-lg-3">Member(s)</div>
                                    <div class="controls col-lg-9">
                                        <div id="MyPillbox" class="pillbox clearfix">
                                            <ul>
                                                <input type="text" placeHolder="Enter Member Name Or Number">
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="control-label col-lg-3">Message</div>
                                    <div class="control-group col-lg-9">
                                        <textarea id="send_instant_message" class="form-control input-sm" rows="3" maxlength="140" placeholder="Enter SMS Message Here" onkeyup="document.getElementById('charsleft').innerHTML = (140 - parseInt(this.value.length)) + ' Left';"></textarea>
                                        <div id="charsleft" class="text-muted m-t-sm text-sm text-right">
                                            140 Left
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions text-right">
                                    <button type="submit" id="send_instant_btn" class="btn btn-sm btn-info">Send Direct SMS</button>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane" id="instant-history" data-href='<?php echo $this->Html->url(array('action' => 'instant_history')); ?>'>profile</div>
                        <div class="tab-pane" id="settings-1">settings</div>
                    </div>
                </div>
            </section>
            <!-- / left tab -->
        </div>

        <div class="col-lg-6">
            <!-- right tab -->
            <section class="panel">
                <header class="panel-heading bg-light lter">
                    <ul class="nav nav-tabs pull-right">
                        <li class="active"><a href="#messages-2" data-toggle="tab"><i class="fa fa-comments text-default"></i></a></li>
                        <li><a href="#profile-2" data-toggle="tab"><i class="fa fa-list text-default"></i> Lists</a></li>
                        <li><a href="#profile-2" data-toggle="tab"><i class="fa fa-user text-default"></i> History</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog text-default"></i> Settings <b class="caret"></b></a>
                            <ul class="dropdown-menu text-left">
                                <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
                                <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
                            </ul>
                        </li>
                    </ul>
                    <span class="hidden-sm font-bold">Broadcast Message</span>
                </header>
                <div class="panel-body">
                    <div class="tab-content">              
                        <div class="tab-pane fade active in" id="messages-2">
                            <form class="form form-horizontal">
                                <div class="form-group">
                                    <div class="control-label col-lg-3">Broadcast List</div>
                                    <div class="controls col-lg-9">

                                        <select class="form-control input-sm">
                                            <option value="">Select Broadcast List</option>
                                            <option value="">-------------------------</option>
                                            <?php
                                            foreach ($broadcast_lists as $list) {
                                                $value = $list['id'];
                                                $text = $list['name'];

                                                echo "<option value='$value'>$text</option>";
                                            }
                                            ?>
                                            <option value="">-------------------------</option>
                                            <option value="new">Create New List</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="control-label col-lg-3">Message</div>
                                    <div class="control-group col-lg-9">
                                        <textarea class="form-control input-sm" rows="3" maxlength="140" placeholder="Enter SMS Message Here" onkeyup="document.getElementById('charsleft').innerHTML = (140 - parseInt(this.value.length)) + ' Left';"></textarea>
                                        <div id="charsleft" class="text-muted m-t-sm text-sm text-right">
                                            140 Left
                                        </div>
                                    </div>
                                </div>
                                <div class="form-actions text-right">
                                    <button class="btn btn-sm btn-info">Send SMS</button>
                                </div>
                            </form>
                        </div>
                        <div class="tab-pane fade" id="profile-2">profile</div>
                        <div class="tab-pane fade" id="dropdown1">dropdown1</div>
                        <div class="tab-pane fade" id="dropdown2">dropdown2</div>
                    </div>
                </div>
            </section>
            <!-- / right tab -->
        </div>

    </div>






</section>

<input type="hidden" id="contacts-autocomplete-url" value="<?php echo $this->Html->url(array('controller' => 'sms', 'action' => 'members_list')); ?>" />

<?php
echo $this->Html->script('app/views/organisations/messages.js');
?>